State Management

With Catalyst, we can build apps for most use cases without relying on third-party state management libraries. This is possible due to how data is seamlessly available from server to client using clientFetcher and serverFetcher.

Additionally, data from one route to another can be accessed through hooks like useRouteData and useCurrentRouteData.

To address use cases where a global store is needed and must be accessible on both the client and server, Catalyst provides built-in support for Redux and Redux Toolkit (along with RTK Query).

Redux and Redux Toolkit with Catalyst

The Redux store should be defined in src/js/store/index.js (which comes pre-configured with create-catalyst-app).

import { compose, createStore, applyMiddleware } from "redux"
import homeReducer from "@reducers/homeReducer.js"

export default function configureStore(initialState,request) {
  // request object is available when the store is initialized on the server
  // creating store with homeReducer and initialData recieved from server
    const store = createStore(
        homeReducer
        initialState,
    )
    return store
}

This store is available in both clientFetcher and serverFetcher. The following example demonstrates data fetching with Redux.

import React from 'react'
import {useSelector} from "react-redux"
import {getHomePageData,isLoading} from "@actions/homePageActions.js"

function HomePage() {
    const { data } = useSelector(state => state.homePageData)
    return (
      <div>
        {data}
      </div>
    )
}
HomePage.serverFetcher = async ({ req }, { store }) => {
  dispatch(isLoading())
  // returning async action
  return dispatch(getHomePageData())
}
HomePage.clientFetcher = async ({ req }, { store }) => {
  dispatch(isLoading())
  // returning async action
  return dispatch(getHomePageData())
}

The diagram below mentions how redux store is created on first fold ssr request.

1. A new store is created on every page request on the server .
2. All actions inside the serverFetcher are dispatched on the server for each request. Asynchronous actions have to be returned as promises, the server waits for these promises to get resolved. It accepts asynchronous actions which return promises. Promise.all should be used to handle multiple asynchronous actions, example: Promise.all([dispatch(action1()),dispatch(action2())])
3. Server extracts state from the store and sends it to the client after completion of the action.
4. Client store is initialized using the data sent from the server.

The store is persisted on client side navigation and is available in clientFetcher to dispatch actions or read data from the store.